<template>
	<view>
		<seeimg ref="mychild" />
		<swiper class="swiper" circular 
		:indicator-dots="true" :autoplay="true" 
		indicator-active-color="#5ca45b"
		:interval="5000"
			:duration="500">
			<swiper-item v-for="(item,index) in bgimageList"  class="swiper-item" >
				<image v-if="item.type == 1" :src="item.src" mode="widthFix"></image>
				<video v-if="item.type == 2" :src="item.src" controls></video>
			</swiper-item>
		</swiper>

		<!-- <liu-slide-img class="my-bg" :list="bgimageList" height="600" :autoplay="autoplay" :interval="interval"
			@change="change" @click="click">
		</liu-slide-img> -->
	</view>
</template>

<script>
	import seeimg from '@/components/xw-seeimg/index'
	export default {
		props: {
			bgimageList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				list: [],
				autoplay: true,
				interval: 3000
			}
		},
		components: {
			seeimg
		},
		onLoad() {

		},
		methods: {
			// 放大图片
			showimg(src) {
				this.$refs.mychild.onImg(src);
			},

			//当前轮播索引
			change(e) {
				// console.log('==========', e)
			},
			//点击轮播
			click(index) {
				this.showimg(this.bgimageList[index].src)
				// console.log('点击轮播', e)
			}
		}
	}
</script>
<style lang="less" scoped>
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 600rpx;
	}

	.swiper-item {
		display: block;
		/* height: 600rpx; */
		line-height: 300rpx;
		text-align: center;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		video{
			width: 100%;
			height: 100%;
		}
	}
	
	image{
		height: 100%;
	}

</style>